<template>
  <div id="spaces-list" class="custom-table" v-loading="isLoading">
    <div v-if="!spaces.length" class="easy-container no-data">{{ isLoading ? '' : '暂无数据' }}</div>
    <div v-for="space in spaces" :key="space.id" class="easy-container flex">
      <div class="cell">
        <router-link :to="`/${$rp.SPACES}/${space.id}`" class="flex">
          <space-avatar :space="space" :size="55" />
        </router-link>
      </div>
      <div class="flex-1 flex align-items-center" style="min-width: 0;">
        <div class="cell" style="flex: 1 1 100%; min-width: 0">
          <div>
            <router-link class="title link f-normal" :to="`/${$rp.SPACES}/${space.id}`">
              {{ space.title }}
            </router-link>
            -
            <router-link class="info-deep link" :to="`/${$rp.USERS}/${space.owner.id}`">
              {{ space.owner.nickname }}</router-link>
          </div>
          <div>
            <p class="no-warp-ellipsis">{{ space.desc }}</p>
          </div>
        </div>
        <div class="cell shrink-0 text-right">
          <SpaceIcons :space="space"/>
          <timeago :date-time="space.updated_at" pre-text="更新于"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SpaceAvatar from '@/components/space-avatar';
import SpaceIcons from './SpacesListIcons';

export default {
  name: 'SpaceList', // 空间列表
  components: { SpaceAvatar, SpaceIcons },
  props: {
    spaces: { // 空间列表数据
      type: Array,
      required: true,
    },
    isLoading: { // 是否正在加载数据
      type: Boolean,
      required: true,
    },
  },
};
</script>

<style></style>
